<template>
  <div class="tips animation" :class="type" v-show="isShow" ref="tips">
    <div class="content">{{msg}}</div>
  </div>
</template>

<script>
export default {
  name: 'pop',
  props: {
    type: {
      default: '',
      type: String
    },
    msg: {
      default: '',
      type: String
    },
    isShow: {
      default: false,
      type: Boolean
    }
  },
  watch: {
    isShow (newval, oldval) {
      if (newval !== oldval && newval === true) {
        setTimeout(() => {
          const height = this.$refs.tips.clientHeight
          const width = this.$refs.tips.clientWidth
          this.$refs.tips.style.marginLeft = -width / 2 + 'px'
          this.$refs.tips.style.marginLeft = -height / 2 + 'px'
        }, 0)
        setTimeout(() => {
          this.isShow = false
          this.msg = ''
          this.type = ''
        }, 3000)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes shake {
  0%,100%{
    transform: translateX(0);
  }
  10%,30%,50%,70%,90%{
    transform: translateX(-10px);
  }
  20%,40%,60%,80%{
    transform: translateX(10px);
  }
}
.tips{
  position: fixed;
  left: 50%;
  top: 50%;
}
.animation {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}
.content{
  background: rgba(0,0,0,0.4);
  color: #fff;
  padding: 10px 15px;
  border-radius: 12px;
}
.shake{
  animation-name: shake;
}
</style>
